<template>
  <div
    style="height: 100%"
    class="uni-scroll"
  >
    <el-table
      style="width: 100%"
      :data="warnList"
      :show-header="false"
    >
      <el-table-column prop="grade" :label="$t('grade')" width="80" :formatter="formatGrade" />
      <el-table-column :label="$t('status')" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 2" type="success">{{ formatDeviceWarnStatus(scope.row.status) }}</el-tag>
          <el-tag v-else type="danger">{{ formatDeviceWarnStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message')"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path:'/device/manage/'+scope.row.deviceCore ,query:{'deviceCore':scope.row.deviceCore}}"
          >
            <span>{{ scope.row.target }}</span>
            <span>{{ $t('now')+$t('value') }}:</span>
            <span>{{ scope.row.value }}</span>
            <span>{{ fLogic(scope.row) }}</span>
            <span>{{ scope.row.logicValue }}</span>
            <span style="float: right">
              <span>{{ formatDate(scope.row.createdDate) }}</span>
              <span v-if="0 !== scope.row.endDate">{{ ' ~ ' + formatDate(scope.row.endDate) }}</span>
            </span>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import BaseView from '../../BaseView'
import { formatDate, formatDeviceWarnStatus } from '@/util/common'
import { pageGetDeviceWarn } from '@/api/iot/iotDeviceWarnApi'
import { getPageSize } from '@/util/storage'

export default {
  name: 'IotDeviceWarn',
  extends: BaseView,
  props: {},
  data() {
    return {
      warnList: []
    }
  },
  mounted() {
    this.pageGetDeviceWarn()
  },
  methods: {
    formatDeviceWarnStatus(status) {
      return formatDeviceWarnStatus(this, status)
    },
    formatGrade(item) {
      return this.$t('warn') + item.grade
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    fLogic(item) {
      return this.$t(item.logic)
    },
    pageGetDeviceWarn() {
      pageGetDeviceWarn({
        deviceId: this.detail.dataBind.deviceId,
        pageSize: getPageSize(),
        currentPage: 1
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.warnList = data.data
        }
      })
    }
  }
}
</script>
